<template lang="html">
    <div class="publicBox">
        <div class="publicBoxContent allOrder">
            <div class="allOrderSerach">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="订单编号">
                        <el-input v-model="formInline.order_no" placeholder="请输入订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="formInline.goods_name" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input placeholder="请输入内容" v-model="content" class="input-with-select">
                            <el-select v-model="type" slot="prepend" placeholder="请选择">
                                <el-option label="用户名" value="1"></el-option>
                                <el-option label="手机号" value="2"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="订单时间">
                        <el-date-picker v-model="time" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期" :default-value=" year + '-' + month"
                                        :picker-options="expireTimeOption"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="allOrderBox">

                <div class="allOrderBoxTable">
                    <div class="allOrderTitle">
                        <div class="titleLeft">
                            <table>
                                <tr>
                                    <td style="width: 80% !important">商品</td>
                                    <td>贸易类型</td>
                                </tr>
                            </table>
                        </div>
                        <div class="titleRight">
                            <table>
                                <tr>
                                    <td>下单用户</td>
                                    <td>手机号码</td>
                                    <td>订单金额</td>
                                    <td>异常信息</td>
<!--                                    <td>操作</td>-->
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="userOrder" v-for="(item,index) in orders" :key="index">
                        <div class="userOrderTop">
                            <span>订单编号：</span><span class="orderNo">{{item.child_no}}</span>
                            <span style="margin-left: 30px">下单时间：</span><span>{{item.create_at}}</span>
                            <span class="statusBtn" @click="goto(item.order_child_id)">订单详情</span>
                        </div>
                        <div class="orderDisplay">
                            <div class="displayLeft">
                                <table v-for="(goods,inde) in item.goods" :key="inde">
                                    <tr>
                                        <td class="diplayImg clearfix">
                                            <div class="bianh">
                                                <div class="dImg">
                                                    <img :src="JSON.parse(goods.image)[0]" alt="">
                                                </div>
                                                <div class="dCon">
                                                    <div class="name" @click="goDetail(goods.goods_id)">{{goods.goods_name}}</div>
                                                    <div class="sum" v-for="(ite,inde) in goods.attr">{{ite[0]}}：{{ite[1]}}<span
                                                        v-show="ite[0]=='数量'">（{{goods.unit}}）</span></div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{goods.trade_type_name}}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="displayRight">
                                <table>
                                    <tr  :style="{ height:(trH + 3)*item.goods.length +'px' }">
                                        <td>{{item.name}}</td>
                                        <td>{{item.phone}}</td>
                                        <td class="money">
                                            {{item.pay_price}}
                                            <p>(含运费：{{item.shipping_amount}})</p>
                                        </td>
                                        <td>
                                           {{ item.order_error.split("：")[1]}}
                                        </td>
<!--                                        <td >-->
<!--                                            <span class="statusBtn cancal"  @click="cancel(item.order_refund_id)">申请退款</span>-->
<!--                                        </td>-->
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="noDingdan" v-if="total<=0">
                <img src="../../assets/img/pc_wudingan.png" alt="暂无"/>
            </div>
            <div class="allOrderPage">
                <el-pagination background @current-change="handleCurrentChange" :page-size="pageSize" :current-page.sync="page"
                               layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "serviceOrder",
        data() {
            return {
                expireTimeOption: {
                    disabledDate(date) {
                        //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                        return date.getTime() > Date.now();
                    }
                },
                year: 0,
                month: 1,
                trH: 90,
                formInline: {
                    order_no: "",
                    start_time: "",
                    end_time: "",
                    name: "",
                    phone: "",
                    goods_name: "",
                },
                hideArr: [],
                page: 1,
                pageSize: 15,
                total: 0,
                orders: [],
                type: "",
                time: "",
                content: "",
            };
        },
        created() {
            this.month = new Date().getMonth();
            this.year = new Date().getFullYear();
            if (this.month == 0) {
                this.year = this.year - 1;
                this.month = 12;
            }
            this.getList();
        },
        watch: {},
        methods: {
            goto(id){
                this.$router.push({path : `/index/order/abnormalDetails?orderId=${id}`})
            },
            cancel(id){

            },
            onSubmit() {
                if (this.time && this.time.length > 0) {
                    this.formInline.start_time = this.time[0];
                    this.formInline.end_time = this.time[1];
                } else {
                    this.formInline.start_time = "";
                    this.formInline.end_time = "";
                }
                this.formInline.name = "";
                this.formInline.phone = "";
                if (this.content) {
                    if (this.type == "1") {
                        this.formInline.name = this.content;
                    } else if (this.type == "2") {
                        this.formInline.phone = this.content;
                    }
                }


                this.page = 1;
                this.getList();
            },
            getList() {
                this.$HttpGet("/index.php?s=/admin/order/all_list", {
                    page: this.page,
                    pageSize: this.pageSize,
                    ...this.formInline,
                    type:"fail"
                }).then(res => {
                    this.orders = res.data.list.data;
                    //总价
                    for (let i = 0; i < this.orders.length; i++) {
                        this.orders[i].numPlay = 0;
                        for (let j = 0; j < this.orders[i].goods.length; j++) {
                            this.orders[i].numPlay += parseFloat(this.orders[i].goods[j].total_pay_price);

                        }
                    }
                    for (let i = 0; i < this.orders.length; i++) {
                        for (let x = 0; x < this.orders[i].goods.length; x++) {
                            var arr = this.orders[i].goods[x].goods_attr.split("|");
                            var endArr = arr.map((item, index) => {
                                return item.split("_")
                            });
                            endArr.pop();
                            this.orders[i].goods[x].attr = endArr;

                        }
                    }
                    this.total = res.data.list.total;

                })
            },
            handleCurrentChange(page) {
                this.page = page;
                this.getList();
            },
            toUrl(url) {
                this.$router.push({path: url});
            }
        },

    };
</script>

<style lang="scss" scoped>
    .allOrder {
        min-width: 850px;

        .allOrderSerach {
            /deep/ .input-with-select .el-input-group__prepend {
                background-color: #fff;
                color: #606266;

                .el-select .el-input {
                    width: 130px;
                }
            }
        }

        .allOrderBox {
            margin-top: 20px;
            /*min-width: 1620px;*/
            .allOrderBoxTable {
                .allOrderTitle {
                    display: flex;
                    justify-content: space-between;

                    .titleLeft, .titleRight {
                        width: 50%;

                        table {
                            width: 100%;

                            tr {
                                td {
                                    padding-left: 10px;
                                }
                            }
                        }
                    }

                    .titleLeft {
                        table {

                        }

                    }

                    .titleRight {
                        table {
                            tr {
                                td {
                                    width: 20%;
                                    padding-left: 10px;
                                }
                            }
                        }
                    }
                }

                .userOrder {
                    margin-top: 20px;

                    .userOrderTop {
                        height: 38px;
                        background: rgba(#3A61CA, 0.1);
                        border: 1px solid #EEEEEE;
                        font-size: 12px;
                        font-weight: 500;
                        color: rgba(#000000, 0.6);
                        line-height: 38px;
                        text-align: left;
                        padding-left: 10px;
                        .statusBtn {
                            color: #409EFF;
                            cursor: pointer;
                            margin-left: 15px;
                        }
                        .orderNo {
                            color: #000000;
                        }
                    }

                    .orderDisplay {
                        display: flex;

                        .displayLeft {
                            width: 50%;
                            border-bottom: 1px solid #EEEEEE;
                            border-left: 1px solid #EEEEEE;

                            table {
                                width: 100%;

                                tr {
                                    height: 90px;

                                    .diplayImg {
                                        width: 80%;
                                        height: 90px;

                                        .bianh {
                                            display: flex;

                                            .dImg {
                                                width: 80px;
                                                height: 90px;
                                                border-right: 1px solid #EEEEEE;

                                                img {
                                                    width: 58px;
                                                    height: 58px;
                                                    margin: 11px;
                                                    margin-top: 16px;
                                                }
                                            }

                                            .dCon {
                                                margin-left: 20px;
                                                font-size: 12px;

                                                .name {
                                                    margin-top: 10px;
                                                    display: -webkit-box;
                                                    -webkit-box-orient: vertical;
                                                    -webkit-line-clamp: 2;
                                                    overflow: hidden;
                                                    line-height: 18px;
                                                }

                                                .sum {
                                                    color: rgba(#000000, .6);
                                                    margin-top: 5px;
                                                }
                                            }
                                        }
                                    }

                                    td {
                                        border-right: 1px solid #EEEEEE;
                                        border-top: 1px solid #EEEEEE;
                                        padding-left: 10px;
                                    }
                                }
                            }
                        }

                        .displayRight {
                            width: 50%;
                            border-top: 1px solid #EEEEEE;
                            border-bottom: 1px solid #EEEEEE;

                            table {
                                width: 100%;
                                height: 100%;
                                tr {
                                    .money {
                                        color: #ea3030;
                                    }
                                    .statusBtn {

                                        display: block;
                                        margin-bottom: 5px;
                                        color: #409EFF;
                                        cursor: pointer;
                                        width: 64px;
                                        height: 24px;
                                        text-align: center;
                                        line-height: 24px;
                                        border-radius: 6px;
                                    }
                                    .cancal{
                                        background: #FFFFFF;
                                        border: 1px solid #EEEEEE;
                                        color: #333333;
                                    }
                                    .cancal:hover{
                                        background: #EEEEEE;
                                        border: 1px solid #D2D2D2;
                                    }

                                    td {
                                        width: 20%;
                                        border-right: 1px solid #EEEEEE;
                                        padding-left: 10px;

                                    }
                                }
                            }
                        }

                    }
                }
            }

        }
        .noDingdan{
            display: flex;
            justify-content: center;
            margin-top: 90px;
        }
        .allOrderPage {
            margin-top: 20px;
            text-align: right;
            margin-bottom: 50px;
        }
    }

</style>
